<template>
  <div>ageRef: {{ ageRef }}</div>
  <ul>
    <li v-for="item in hobbiesRef">{{ item }}</li>
  </ul>
</template>

<script setup>
/* 
Vue3语法，age每秒+1岁，侦听age的变化，
满60岁时停止age的计时，
页面age显示“约汉光荣退休惹~”,
同时爱好变为钓鱼+养乌龟 
*/
import person from "../../mock/data.json";

import { ref, onBeforeUnmount } from "vue";

const ageRef = ref(person.age);
const hobbiesRef = ref(person.hobbies);

let timer = setInterval(() => {
  ageRef.value < 40 ? ageRef.value++ : (ageRef.value = "约汉光荣退休惹~");
  if (ageRef.value < 40) {
    ageRef.value++;
  } else {
    ageRef.value = "约汉光荣退休惹~";
    hobbiesRef.value = ["钓鱼", "养乌龟"];

    clearInterval(timer);
    timer = null;
  }
}, 1000);

onBeforeUnmount(() => timer && clearInterval(timer));
</script>

<style lang="scss" scoped></style>
